<template>
	<view class="sun-index">
		<view style="position: relative;height: 380rpx;">
			<view style="display: flex;justify-content: center;">
				<view class="sun-logo-box" style="position: absolute;">
					<image class="sun-icon-img" src="@/static/logo/beijin2.png" />
				</view>
			</view>
		</view>
		<view style="position: relative;">
			<view class="sun-logo-denglu">
				<view class="sun-login-box">
					<view class="sun-login-text">
						<text>{{ t('login.name') }}</text>
					</view>

				</view>
				<view class="sun-login-box">
					<view class="sun-label">
						<text class="label-text">{{ t('login.mobile') }}</text>
					</view>
					<view class="sun-input-box">
						<input v-model="state.mobile" type="text" :placeholder="t('login.enterMobile')"
							placeholder-class="placeholder-class" />
						<!-- <image @click="state.mobile=''" class="close-icon" src="@/static/imgs/close_icon.png" /> -->
					</view>
				</view>
				<view class="sun-login-box">
					<view class="sun-label">
						<text class="label-text">{{ t('login.password') }}</text>
					</view>
					<view class="sun-input-box">
						<u-input v-model="state.password" password border="none" :placeholder="t('login.enterPassword')"
							v-if="imageType">
							<template #suffix>
								<image src="../../static/imgs/yanjin1.png" style="width: 18px;height: 12px;"
									v-if="imageType" @click="tabImage"></image>
								<image src="../../static/imgs/yanjin2.png" style="width: 18px;height: 12px;"
									v-if="!imageType" @click="tabImage"></image>
							</template>
						</u-input>
						<u-input v-model="state.password" border="none" v-if="!imageType"
							:placeholder="t('login.enterPassword')">
							<template #suffix>
								<image src="../../static/imgs/yanjin1.png" style="width: 18px;height: 12px;"
									v-if="imageType" @click="tabImage"></image>
								<image src="../../static/imgs/yanjin2.png" style="width: 18px;height: 12px;"
									v-if="!imageType" @click="tabImage"></image>
							</template>
						</u-input>
						<!-- <image @click="state.password=''" class="close-icon" src="@/static/imgs/close_icon.png" /> -->
						<!-- <u-input v-model="state.password" password border="none" suffixIcon="eye-fill"
							laceholder="t('login.enterPassword')"></u-input> -->


					</view>
				</view>
				<view class="login-btn-box">
					<view class="login-btn" @click="handleSubmit">{{ t('login.name') }}</view>
				</view>
			</view>
			<view class="sun-tip">
				<text class="sun-tip-text" @click="goRegister">{{ t('register.user') }}</text>
				<text class="sun-tip-text" @click="goForgot">{{ t('login.forgot') }}</text>
			</view>
		</view>
		<view class="login-btn-agr">
			<u-checkbox-group @change="checkboxChange" placement="column" shape="circle">
				<view style="display: flex;flex: 1;align-items: center;">
					<u-checkbox :customStyle="{marginBottom: '8px'}" name="1">
					</u-checkbox>
					<view style="color: rgba(153, 153, 153, 1);font-size: 13px;">
						<text >{{ t('login.agrTitle') }}</text>

						<text @tap="gopath('User')" style="color: rgba(41, 63, 204, 1);">
							{{ t('login.userName') }}
						</text>
						{{t('login.he')}}
						<text @tap="gopath('privacya')" style="color: rgba(41, 63, 204, 1);">
							<text>{{ t('login.agrName') }}</text>

						</text>
					</view>
				</view>

			</u-checkbox-group>

		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n()

	import {
		login
	} from '@/api/login/login.js'


	const state = reactive({
		mobile: '',
		password: ''
	})

	let checkValue = reactive([])

	const imageType = ref(true)

	function handleSubmit() {
		console.log(checkValue)
		if (!state.mobile) return uni.showToast({
			title: t('login.enterMobile'),
			icon: 'none',
			duration: 1500
		})
		if (!state.password) return uni.showToast({
			title: t('login.enterPassword'),
			icon: 'none',
			duration: 1500
		})

		loginClick()

	}

	function goRegister() {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}

	function tabImage() {
		imageType.value = !imageType.value
	}

	function goForgot() {
		uni.navigateTo({
			url: '/pages/register/forgot'
		})
	}

	function loginClick() {
		if (checkValue.length > 0) {
			login(state).then(res => {
				console.log(res)
				if (res.code == '200') {
					uni.showToast({
						title: t('common.success'),
						duration: 1500
					})
					uni.setStorageSync('token', res.data.auth_token)
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}, 1000)
				}
			}).catch(err => {
				console.log('err', err)
				uni.showToast({
					title: err.msg,
					duration: 1500,
					icon: 'error'
				})
			})
		} else {
			uni.showToast({
				title: t('login.checkValue'),
				duration: 1500,
				icon: 'none'
			})
		}

	}

	function checkboxChange(e) {
		checkValue = e
	}
	
	function gopath(url){
		if(url == 'User'){
			if (uni.getStorageSync('Lang') == 'zh-Hans') {
				uni.navigateTo({
					url: '/pages/user/aboutus/webview' + '?url=' + 'https://app.anfujia.info/api/static/agreement/用户协议.html',
				});
			} else if (uni.getStorageSync('Lang') == 'en') {
				uni.navigateTo({
					url: '/pages/user/aboutus/webview' + '?url=' + 'https://app.anfujia.info/api/static/agreement/用户协议-(英).html',
				});
			} else if (uni.getStorageSync('Lang') == 'zh-Hant') {
				uni.navigateTo({
					url: '/pages/user/aboutus/webview' + '?url=' + 'https://app.anfujia.info/api/static/agreement/用户协议-(繁).html',
				});
			} else {
				uni.navigateTo({
					url: '/pages/user/aboutus/webview' + '?url=' + 'https://app.anfujia.info/api/static/agreement/用户协议.html',
				});
			}
		}
		
		if(url == 'privacya'){
			if (uni.getStorageSync('Lang') == 'zh-Hans') {
				uni.navigateTo({
					url: '/pages/user/aboutus/webview' + '?url=' + 'https://app.anfujia.info/api/static/agreement/隐私政策.html',
				});
			} else if (uni.getStorageSync('Lang') == 'en') {
				uni.navigateTo({
					url: '/pages/user/aboutus/webview' + '?url=' + 'https://app.anfujia.info/api/static/agreement/隐私政策-(英).html',
				});
			} else if (uni.getStorageSync('Lang') == 'zh-Hant') {
				uni.navigateTo({
					url: '/pages/user/aboutus/webview' + '?url=' + 'https://app.anfujia.info/api/static/agreement/隐私政策-(繁).html',
				});
			} else {
				uni.navigateTo({
					url: '/pages/user/aboutus/webview' + '?url=' + 'https://app.anfujia.info/api/static/agreement/隐私政策.html',
				});
			}
		}
	}
</script>

<style scoped>
	page {
		background: linear-gradient(180deg, rgba(239, 246, 255, 1) 0%, rgba(242, 244, 247, 1) 100%);
	}

	.sun-logo-box {
		display: flex;
		margin-top: 126rpx;
		justify-content: center;
		align-items: center;
	}

	.sun-logo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 180rpx;
		height: 180rpx;
		border-radius: 15rpx;
		background-color: #12C8B9;
		box-shadow: 0rpx 0rpx 30rpx rgba(18, 200, 185, 0.5);
	}

	.sun-logo-denglu {
		background-color: #fff;
		margin: 40rpx;
		border-radius: 28rpx;
	}

	.close-icon {
		width: 36rpx;
		height: 34rpx;
	}

	.sun-icon-img {
		width: 500rpx;
		height: 500rpx;
	}

	.sun-login-box {
		padding: 20rpx 60rpx;
	}

	.sun-login-text {
		font-size: 48rpx;
		font-weight: 700;
		text-align: center;
	}

	.sun-label {
		display: flex;
		align-items: center;
	}

	.label-text {
		margin-left: 16rpx;
		font-weight: 500;
		color: #272e2d;
		font-size: 30rpx;
	}

	.sun-input-box {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
		padding: 0px 10rpx;
	}

	.sun-input-box input {
		flex: 1;
	}

	.placeholder-class {
		font-size: 30rpx;
		color: #C0C0C0;
	}

	.sun-tip {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 68rpx;
	}

	.sun-tip-text {
		color: rgba(18, 39, 167, 1);
		font-size: 13px;
	}

	.login-btn-box {
		width: 670rpx;
		padding: 50rpx 60rpx;
	}

	.login-btn-agr {
		position: absolute;
		bottom: 129rpx;
		width: 80%;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		white-space: normal;
		word-break: break-word;
		/* padding: 50rpx 68rpx 0rpx; */
		overflow: hidden;
		/* 	display: flex;
		flex-wrap: wrap; */
		/* justify-content: center; */
	}

	.login-btn {
		height: 82rpx;
		border-radius: 41rpx;
		background: linear-gradient(90deg, rgba(77, 110, 223, 1) 0%, rgba(19, 40, 169, 1) 100%);
		box-shadow: -1px 12px 11px 0px rgba(77, 110, 223, 0.4);
		text-align: center;
		line-height: 82rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}
</style>